<script setup>
import Left from "@/components/Gas/Left/index.vue";
import Right from "@/components/Gas/Right/index.vue";
import Map from "@/components/Map.vue";
import Top from "@/components/Top.vue";
import Tab from "@/components/Tab.vue";
import IconList from "@/components/icon-list/index.vue";
import { useMapStore } from "@/stores/map.js";

const dataScreenRef = ref(null);
const mapStore = useMapStore();

onMounted(() => {
    setTimeout(() => {
        // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
        if (dataScreenRef.value) {
            // dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
            dataScreenRef.value.style.width = `2560px`;
            dataScreenRef.value.style.height = `1440px`;
            // 修复地图缩放中心点偏移的问题
            dataScreenRef.value.style.transform = `scale(${getScale()}) translateZ(0) translate3d(0, 0, 0)`;
        }
    }, 500);

    // 为浏览器绑定事件
    window.addEventListener("resize", resize);
});

// 根据浏览器大小推断缩放比例
const getScale = (width = 2560, height = 1440) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    let scale = ww < wh ? ww : wh;
    mapStore.seenScale = scale;
    return scale;
};

// 监听浏览器 resize 事件
const resize = () => {
    if (dataScreenRef.value) {
        // dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
        // 修复地图缩放中心点偏移的问题
        dataScreenRef.value.style.transform = `scale(${getScale()}) translateZ(0) translate3d(0, 0, 0)`;
        // 取消地图的缩放
        document.getElementById("map_container").style.transform = `scale(${
            1 / getScale()
        }) translateZ(0) translate3d(0, 0, 0)`;
    }
    // // 使用了 scale 的echarts其实不需要需要重新计算缩放比例
    // Object.values(dataScreen).forEach((chart) => {
    //     chart && chart.resize();
    // });
};
</script>

<template>
    <div class="contian">
        <div class="screen" ref="dataScreenRef">
            <!-- 标题 -->
            <Top />
            <!-- 选择 -->
            <!-- <Tab /> -->
            <!-- 地图 -->
            <Map />
            <IconList />
            <!-- 左边echarts视图 -->
            <Left />
            <!-- 右边echarts视图 -->
            <Right />
        </div>
    </div>
</template>
<style scoped lang="scss">
.contian {
    background: rgb(11, 18, 32);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.screen {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    position: fixed;
    transition: all 0.5s;
    // max-width: 2560px;
    // min-width: 2000px;
    // height: 1440px;
    // position: relative;
}
</style>
